<template>
  <el-card class="box-card" style="margin: 12px 10px 0">
    <!-- 1.头部表单筛选区域 -->
    <el-form label-width="80px" class="container">
      <el-form-item label="关键字">
        <el-input v-model.trim="keyword" placeholder="根据编号搜索" />
      </el-form-item>
      <div>
        <el-button class="btn" @click="hClear">清除</el-button>
        <el-button
          class="btn"
          :loading="isLoading"
          type="primary"
          @click="hSearch"
        >搜索</el-button>
      </div>
    </el-form>
    <!-- 2.数据总条数呈现-->
    <div class="center">
      <i class="el-icon-info" /> 数据一共{{ totalCount }}条
    </div>
    <!------- 3.表格数据部分start ----------->
    <el-table
      v-loading="isLoading"
      fit
      :data="list"
      style="width: 100%"
      class="elTable"
    >
      <el-table-column label="编号" width="190">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="题型">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType == 1">单选</span>
          <span v-else-if="scope.row.questionType == 2">多选</span>
          <span v-else-if="scope.row.questionType == 3">简答</span>
        </template>
      </el-table-column>
      <el-table-column label="题目编号" width="200">
        <template slot-scope="scope">
          <el-button
            v-for="questionid in scope.row.questionIDs"
            :key="questionid.number"
            type="text"
            selected
            @click="hOpenDialog(questionid.id)"
          >{{ questionid.number }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="160" />
      <el-table-column prop="totalSeconds" label="答题时间(s)" />
      <el-table-column prop="accuracyRate" label="正确率(%)" />
      <el-table-column prop="userName" label="录入人" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="hDelete(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- -----------------------弹出层开始---------------------------->
    <!-- :before-close="handleClose" -->
    <el-dialog title="题目类型" :visible.sync="dialogVisible" width="70%">
      <div class="detail">
        <div class="row">
          <span v-if="questionDetail.questionType == 1">【题型】: 单选题</span>
          <span
            v-else-if="questionDetail.questionType == 2"
          >【题型】: 多选题</span>
          <span
            v-else-if="questionDetail.questionType == 3"
          >【题型】: 简答题</span>
          <span>【编号】: {{ questionDetail.id }} </span>
          <span v-if="questionDetail.difficulty == 1">【难度】: 简单</span>
          <span v-else-if="questionDetail.difficulty == 2">【难度】: 一般</span>
          <span v-else-if="questionDetail.difficulty == 3">【难度】: 困难</span>
          <span>【标签】: {{ questionDetail.tags }}</span>
        </div>
        <div class="row">
          <span>【学科】: {{ questionDetail.subjectName }}</span>
          <span>【目录】: {{ questionDetail.directoryName }}</span>
          <span>【方向】: {{ questionDetail.direction }}</span>
        </div>
        <el-divider />
        【题干】:
        <div style="color: blue" v-html="questionDetail.question" />
        <div>
          <span
            v-if="questionDetail.questionType === 1"
            style="width: 90%"
          >单选题 选项：(以下选中的选项为正确答案)</span>
          <span
            v-else-if="questionDetail.questionType === 2"
            style="width: 90%"
          >多选题 选项：(以下选中的选项为正确答案)</span>
          <span
            v-else-if="questionDetail.questionType === 3"
            style="width: 90%"
          >简答题 选项：(以下选中的选项为正确答案)</span>
          <div v-if="questionDetail.questionType === 1">
            <el-radio-group v-model="isRight">
              <el-radio
                v-for="item in questionDetail.options"
                :key="item.code"
                class="disabled"
                :label="item.isRight"
              >{{ item.title }}</el-radio>
            </el-radio-group>
          </div>
          <div v-else-if="questionDetail.questionType === 2">
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                v-for="item in questionDetail.options"
                :key="item.code"
                class="disabled"
                :label="item.code"
              >{{ item.title }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-divider />
        【参考答案】:
        <el-button type="danger" @click="isShow = true">视频答案解析</el-button>
        <div style="margin-top: 20px">
          <video
            v-show="isShow"
            autoplay
            controls
            :src="questionDetail.videoURL"
            style="height: 200px"
          />
        </div>
        <el-divider />
        【答案解析】:
        <span
          style="width: 80%; vertical-align: middle"
          v-html="questionDetail.answer"
        />
        <el-divider />
        【题目备注】: {{ questionDetail.remarks }}
      </div>
      <div style="height: 30px">
        <el-button
          type="primary"
          style="float: right"
          @click="dialogVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>
    <!-- -----------------------弹出层结束---------------------------->
    <!-- 表格数据部分end -->
    <div class="footer">
      <el-pagination
        :disabled="isLoading"
        background
        :page-sizes="[5, 10, 20, 50]"
        layout="prev, pager, next, sizes, jumper"
        :current-page="curpage"
        :page-size="20"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="hCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
import { detail } from '@/api/DS/h/questions'
import * as item from '@/api/DS/ra/questions'
// console.log(item.list)
// console.log(item)
export default {
  name: 'Randoms',
  data() {
    return {
      isLoading: false, // 添加loading效果
      checkList: [], // 多选框的数组
      isRight: 1, // 单选isRight为1是正确答案
      videoUrl: '', // 视频默认为空
      keyword: '', // 关键字默认为空
      // totalCount: 100, // 总页数
      totalCount: 0,
      curpage: 1, // 当前页
      pageSize: 5,
      dialogVisible: false, // 默认弹出层关闭
      list: [],
      questionDetail: '',
      isShow: false
    }
  },
  created() {
    this.list = item.list
    console.log(this.list)
    this.totalCount = item.list.length
    // this.loadQuestionsRandoms()
  },
  methods: {
    // async loadQuestionsRandoms() {
    //   try {
    //     const res = await list({
    //       page: this.curpage,
    //       pagesize: this.pageSize,
    //       keyword: this.keyword
    //     })
    //     console.log('获取题组列表', res)
    //     this.list = res.data.items
    //     this.totalCount = res.data.counts
    //     this.isLoading = false
    //   } catch (error) {
    //     this.isLoading = false
    //   }
    // },
    // 点击按钮进行清空操作
    hClear() {
      this.keyword = ''
      this.list = item.list
    },
    // 点击搜索按钮进行搜索
    hSearch() {
      // 1.让页面为1
      this.curpage = 1
      // 2.添加loading效果
      this.isLoading = true
      // 3.重新渲染页面
      // this.loadQuestionsRandoms()
      // console.log(this.list)
      this.list = this.list.filter(item => item.id === this.keyword)
      // console.log(this.list)
      this.totalCount = item.list.length
      this.isLoading = false
    },
    // 点击切换页面
    handleSizeChange(val) {
      // console.log(`当前的 ${val}`)
      // 1.更新pageSize的值
      this.pageSize = val
      // // 2.回到第一页查询
      this.curpage = 1
      // 3.重新渲染页面
      this.hCurrentChange(1)
    },
    // 页码改变
    hCurrentChange(val) {
      // 1.更新当前页
      this.curpage = val
      // 2.重新渲染页面
      // this.loadQuestionsRandoms()
    },
    hDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          // console.log(index, row.id)
          // const res = await removeRandoms({
          //   id: row.id
          // })

          // item.default.delete(row)

          // console.log(res)
          // 1.成功提示
          this.$message.success('删除成功')
          // 2.重新渲染页面
          // this.loadQuestionsRandoms()
        } catch (err) {
          this.$message.error('删除失败')
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async hOpenDialog(id) {
      // 1.打开弹层
      this.dialogVisible = true
      // 2.将isShow的状态修改为false
      this.isShow = false
      console.log(id)
      // 3.发送请求
      try {
        const res = await detail({
          id: id
        })
        // console.log(res)
        // 4.获取题目详情
        this.questionDetail = res.data
        // this.questionDetail = this.list

        console.log('获取题目详情111', this.questionDetail)
        const options = this.questionDetail.options
        // 5.遍历每个选项，将正确的答案追加到数组中
        for (const i in options) {
          if (options[i].isRight === 1) {
            this.checkList.push(options[i].code)
          }
        }
      } catch (err) {
        // this.$message.error('获取信息失败')
        console.log(err)
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.btn {
  display: inline-block;
  height: 35px;
}
.center {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: grey;
  background-color: rgba(244, 244, 245);
  padding-left: 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.footer {
  float: right;
  margin: 15px 0;
}
.row {
  height: 100%;
  margin: 12px 0;
}
.detail span {
  display: inline-block;
  width: 200px;
  height: 100%;
  line-height: 100%;
  vertical-align: top;
}
.disabled {
  display: block;
  padding: 6px;
  pointer-events: none;
}
</style>
